<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情 {{ article.title }}
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}


<div class="container">
	<a class="btn " href="{% url 'article:article_list' %}">MENU</a>
    <div class="row">
		<!-- 文章详情 -->
		<div class="col-9">
			<!-- 标题及作者 -->
			<h1 class="mt-4 mb-4">{{ article.title }}</h1>
			<!-- 标注 -->
			<div class="alert alert-success">
				<div class="mt-1">
					<i class="bi bi-outlet" style="color: red;"></i> 
						作者：{{ article.author }}&nbsp;					
					<i class="fas fa-clock" style="color: pink;"></i>
						更新于 {{ article.updated|date:'Y-m-d' }}&nbsp;
					<i class="bi bi-eye" style="color: blue;"></i> 
						阅览：{{ article.total_views }}&nbsp;					
					<i class="fas fa-comments" style="color: yellowgreen;"></i> 
						评论：{{ article.total_views }}&nbsp;
				</div>
				{% if user == article.author %}
				<div class="mt-1">
					<a href="#" onclick="confirm_safe_delete()">
						<i class="bi bi-trash"></i> 删除文章
					</a>*
					<a href="{% url 'article:article_update' article.id %}">
						<i class="bi bi-vector-pen"></i> 编辑文章
					</a>
				</div>
				{% endif %}
	
				<!-- 新增一个隐藏的表单(删除文章) -->
				<form 
					  style="display:none;" 
					  id="safe_delete"
					  action="{% url 'article:article_safe_delete' article.id %}" 
					  method="POST"
					  >
					{% csrf_token %}
					<button type="submit">发送</button>
				</form>
			</div>
			<!-- 文章正文 -->
			<div class="col-12">
				<p>{{ article.body|safe }}</p>
			</div>			
		</div>	
		<!-- 新增的目录 -->
		<div class="col-3 mt-4">
			<h4><strong>目录</strong></h4>
			<hr>
			<div>
				{{ toc|safe }}
			</div>
		</div>
    </div>
</div>

<script>
    // 删除文章的函数
    function confirm_delete() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认删除",
            // 正文
            content: "确认删除这篇文章吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href='{% url "article:article_delete" article.id %}'
            },
        })
    }
	function confirm_safe_delete() {
		layer.open({
			title: "确认删除",
			content: "确认删除这篇文章吗？",
			yes: function(index, layero) {
				$('form#safe_delete button').click();
				layer.close(index);
			}
		})
	}
</script>
{% endblock content %}